@mixin siderbar($bgColor, $textColor, $activeTextColor, $hightlightColor) {
  .sidebar-container {
    background-color: $bgColor;
    box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
  }
  .el-submenu__title, .el-menu-item {
    color: $textColor;
    border-left: 4px solid transparent;
  }

  .el-menu-item {
    &.is-active, &:hover, &:focus {
      color: $hightlightColor;
      border-left: 4px solid $hightlightColor;
    }
  }

  .el-submenu {
    &.is-active, &:hover, &:focus  {
      > .el-submenu__title {
        color: $hightlightColor;
        border-left: 4px solid $hightlightColor;
      }
    }

    &.is-opened > .el-submenu__title {
      color: $textColor;
      border-left: 4px solid transparent;
    }

    &.is-opened > .el-submenu__title:hover {
      color: $hightlightColor;
    }
  }
}

@mixin navbar($bgColor, $textColor) {
  .el-header {
    background-color: $bgColor;
    color: $textColor;
    a {
      color: $textColor;
    }
  }
}

#app>.root-container {
  &.theme-blue {
    @include siderbar(#28373e, #b0b9c7, #FFF, #1e88e5);
    @include navbar(#1e88e5, #FFF);
  }

  &.theme-black {
    @include siderbar(#28373e, #b0b9c7, #FFF, #FFF);
    @include navbar(#FFF, #000);
  }

  &.theme-purple {
    @include siderbar(#28373e, #b0b9c7, #FFF, #7460ee);
    @include navbar(#7460ee, #FFF);
  }

  &.theme-green {
    @include siderbar(#28373e, #b0b9c7, #FFF, #00acc1);
    @include navbar(#00acc1, #FFF);
  }

  &.theme-red {
    @include siderbar(#28373e, #b0b9c7, #FFF, #f62d51);
    @include navbar(#f62d51, #FFF);
  }

  &.theme-yellow {
    @include siderbar(#28373e, #b0b9c7, #FFF, #e9ab2e);
    @include navbar(#e9ab2e, #FFF);
  }

  &.theme-light-blue {
    @include siderbar(#FFF, #b0b9c7, #1e88e5, #1e88e5);
    @include navbar(#1e88e5, #FFF);
  }

  &.theme-light-black {
    @include siderbar(#FFF, #b0b9c7, #28373e, #28373e);
    @include navbar(#28373e, #FFF);
  }

  &.theme-light-purple {
    @include siderbar(#FFF, #b0b9c7, #FFF, #7460ee);
    @include navbar(#7460ee, #FFF);
  }

  &.theme-light-green {
    @include siderbar(#FFF, #b0b9c7, #FFF, #00acc1);
    @include navbar(#00acc1, #FFF);
  }

  &.theme-light-red {
    @include siderbar(#FFF, #b0b9c7, #FFF, #f62d51);
    @include navbar(#f62d51, #FFF);
  }

  &.theme-light-yellow {
    @include siderbar(#FFF, #b0b9c7, #FFF, #e9ab2e);
    @include navbar(#e9ab2e, #FFF);
  }
}